<template>
  <canvas id="three" ref="three"/>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import VueEvent from '../../../common/event'
import CanvasObject from '../js/main'

var canvasObject = ref({}); // threejs 相关
var three = ref(null); // 获取 three 的 DOM 元素

/**
 * onMounted 钩子函数
 */
onMounted(() => {
  // 导入 main.js 中的 CanvasObject 类，并实例化
  canvasObject.value = new CanvasObject();
  canvasObject.value.initThree();
  canvasObject.value.changeCameraPositon();

  // 初始化 three 高度
  let w_height = window.innerHeight < 720 ? 720 : window.innerHeight; // 响应式获取高度
  three.value.style.height = w_height - 80 + "px";
})

/**
 * 兄弟组件通信相关（scene_button 发来的方法）
 */
VueEvent.on('rotateBtn', () => {
  // 停止动态相机
  canvasObject.value.actionCamera.timeScale = 0;
  canvasObject.value.actionControls.timeScale = 0;

  // 开启自动旋转
  canvasObject.value.controls.autoRotate == true ? canvasObject.value.controls.autoRotate = false : canvasObject.value.controls.autoRotate = true;
})

VueEvent.on('scaleBtn', () => {
  // 停止动态相机
  canvasObject.value.actionCamera.timeScale = 0;
  canvasObject.value.actionControls.timeScale = 0;

  // 复原相机
  canvasObject.value.camera.position.x = 0;
  canvasObject.value.camera.position.z = 600;
  canvasObject.value.camera.position.y = 480;
  canvasObject.value.controls.target.x = 0;
  canvasObject.value.controls.target.z = 80;
  canvasObject.value.controls.target.y = 40;
})

/**
 * game_table 发来的事件
 */
VueEvent.on('ambulanceAnimaiton', () => {
  // 救护车动画开始，isPause 变为 true
  VueEvent.emit('pauseStart');
  let cv = canvasObject.value; // 换名
  cv.Mixer.push(cv.actionAmbulance);
  setTimeout(() => {
    cv.Mixer.pop();
    VueEvent.emit('pauseFinish');
  }, 3750); // 动画结束时，从 Mixer 移除
})

VueEvent.on('startTest', () => {
  // 开启核酸检测动画
  VueEvent.emit('pauseStart');
  let cv = canvasObject.value; // 换名
  cv.Mixer.push(cv.actionDoctor);
  setTimeout(() => {
    cv.Mixer.pop();
    VueEvent.emit('pauseFinish');
  }, 3750); // 动画结束时，从 Mixer 移除
})
</script>

<style scoped>
  #three {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
  }
</style>